<template>
    <div class="container">
        <div class="top">
            <el-input style="width: 200px; margin-bottom: 5px" v-model="search.name" placeholder="请输入货架名称" clearable>
            </el-input>
            <el-input style="width: 200px; margin-bottom: 5px" v-model="search.number" placeholder="请输入货架层数" clearable>
            </el-input>
            <el-button size="small" type="primary" class="handleSearch" icon="el-icon-search" @click="handleSearch()">查询
            </el-button>
            <el-button size="small" type="danger" class="handleSearch" icon="el-icon-delete" @click="empty()">清空
            </el-button>
            <el-button class="add" size="small" type="primary" @click="addPermission" icon="el-icon-circle-plus">添加货架
            </el-button>
        </div>
        <el-table max-height="600" :data="tableData" border style="width: 100%" empty-text="暂无数据">
            <el-table-column prop="name" label="货架名称" align="center"></el-table-column>
            <el-table-column prop="number" label="货架层数" align="center"></el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope)">编辑</el-button>
                    <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>

        <shelvesDialog :dialog="dialog" :regions="regions" @upData="getData"></shelvesDialog>
    </div>
</template>
<script>
    import Pagination from "@/components/pagination";
    import { getToken } from "@/utils/auth";
    import { shelvesList, shelvesdestroy } from "@/api/warehouse/warehouse";
    import ShelvesDialog from "@/components/warehouse/shelvesDialog";
    export default {
        components: {
            pagination: Pagination,
            shelvesDialog: ShelvesDialog,
        },
        data() {
            return {
                //页面数据
                tableData: [],
                dialog: {
                    centerDialogVisible: false,
                    dialogType: "",
                },
                regions: {
                    name: "",
                    id: "",
                    number: "",
                },
                //分页
                pageData: {
                    pageSizes: [10, 20],
                    pageSize: 10,
                    page: 1,
                    total: null,
                    layout: "total, sizes, prev, pager, next, jumper",
                },
                search: {
                    name: "",
                    number: '',
                },
            };
        },

        created() {
            //页面数据
            this.getData();
        },
        methods: {
            //页面数据
            getData() {
                let data = {
                    limit: this.pageData.pageSize,
                    page: this.pageData.page,
                    name: this.search.name,
                    number: this.search.number,
                };
                shelvesList(data)
                    .then((res) => {
                        if (res.code == 0) {
                            this.tableData = res.data.data;
                            this.pageData.page = res.data.current_page;
                            this.pageData.pagesize = res.data.per_page;
                            this.pageData.total = res.data.total;
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },

            // 本地搜索
            handleSearch() {
                this.pageData.page = 1;
                this.pageData.total = null;
                this.getData();
            },

            //清空
            empty() {
                this.search = {
                    name: "",
                    number: "",
                };
            },
            //添加人员
            addPermission() {
                this.dialog.centerDialogVisible = true;
                this.dialog.dialogType = "";
                this.regions.name = "";
                this.regions.id = "";
                this.regions.number = '';
            },
            //编辑
            handleEdit(scope) {
                this.dialog.centerDialogVisible = true;
                this.dialog.dialogType = "edit";
                this.regions.name = scope.row.name;
                this.regions.id = scope.row.id;
                this.regions.number = scope.row.number;
            },
            //删除
            handleDelete(scope) {
                this.$confirm("是否删除该条信息?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let data = {
                            id: scope.row.id,
                        };
                        shelvesdestroy(data)
                            .then((res) => {
                                if (res.code == 0) {
                                    this.getData();
                                    this.$message({
                                        type: "success",
                                        message: res.msg,
                                    });
                                }
                            })
                            .catch(err => {
                                console.log(err, 99999)
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            //每页多少条
            handleCurrentChange(val) {
                this.pageData.page = 1;
                this.pageData.pageSize = val;

                this.getData();
            },
            //选取页数
            handleSizeChange(page) {
                this.pageData.page = page;

                this.getData();
            },
            //选取
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
    };
</script>
<style scoped>
    .top {
        position: relative;
        margin-bottom: 5px;
    }

    .btnList {
        position: relative;
        margin-bottom: 5px;
    }

    .add {
        position: absolute;
        right: 0;
        top: 4px;
    }

    .pagination {
        text-align: right;
        padding: 10px;
    }
</style>